<template>
  <a-card class="table2" :bordered="false">
    <a-form ref="formRef" :model="form" size="medium" auto-label-width>
      <a-form-item label="标题" field="title">
        <a-input v-model="form.title" placeholder="请输入标题"></a-input>
      </a-form-item>
      <a-form-item label="图片" field="pic">
        <MsUpload v-model="form.pic"></MsUpload>
      </a-form-item>
      <a-form-item label="跳转链接" field="link">
        <a-input placeholder="请输入跳转链接" v-model="form.link" allow-clear>
          <template #append>
            <div @click="onChangeLink"><icon-link />选择</div>
          </template></a-input
        >
      </a-form-item>
      <a-form-item label="点击量" field="clickCount">
        <a-input-number :min="0" v-model="form.clickCount" placeholder="请输入点击量"></a-input-number>
      </a-form-item>
      <a-form-item label="是否启用" field="isShow">
        <a-switch :checked-value="1" :unchecked-value="0" v-model="form.isShow"></a-switch>
      </a-form-item>
      <a-form-item>
        <a-space class="mt-20">
          <a-button type="primary" :loading="loading" @click="onOk">提交</a-button>
        </a-space>
      </a-form-item>
    </a-form>
    <Link
      ref="LinkRef"
      @click="
        (value) => {
          form.link = value
        }
      "
    ></Link>
  </a-card>
</template>

<script setup>
import { announcementEdit, announcementAdd } from '@/apis'
import { reAssign } from '@/utils/common'
import { Message } from '@arco-design/web-vue'
import $bus from '@/utils/bus'
import { useTabsStore } from '@/store'

defineOptions({ name: 'appNoticeEdit' })

const route = useRoute()
const LinkRef = ref()
const tabsStore = useTabsStore()
const formRef = ref()
const loading = ref(false)

const form = reactive({
  id: undefined,
  title: undefined,
  pic: undefined,
  link: undefined,
  clickCount: undefined,
  isShow: 0
})

// 初始化表单值
onMounted(() => {
  let formO = false
  const key = route.fullPath
  if (sessionStorage.getItem(key) || history.state.item) {
    if (history.state.item) {
      sessionStorage.setItem(key, history.state.item)
    } else {
      history.state.item = sessionStorage.getItem(key)
    }
    formO = JSON.parse(history.state.item)
  }
  reAssign(form, formO)
  tabsStore.changeTagTitle(form.id ? '编辑公告' : '新增公告')
  form.isShow = form.isShow ?? 0
})

// 点击确认添加/编辑
const onOk = async () => {
  const validateResult = await formRef.value?.validate()
  if (validateResult) return false
  try {
    loading.value = true
    const api = form.id ? announcementEdit : announcementAdd
    await api(form)
    $bus.emit('appNotice')
    Message.success('操作成功')
    tabsStore.closeCurrent(route.fullPath, { name: 'app' })
  } finally {
    loading.value = false
  }
}

const onChangeLink = () => {
  LinkRef.value?.changeLink()
}

provide('formRef', formRef)
</script>

<style lang="scss" scoped>
.table2 {
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  margin: $margin;
  background: var(--color-bg-1);
  padding: $padding;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  .form {
    :deep(.arco-form-item) {
      margin-bottom: 10px;
    }
  }
}
</style>
